<template>
    <h1>最近营业情况</h1>
        <div class="flex justify-space-between mb-4 flex-wrap gap-4">
        <el-button text bg @click="yesterday()"> 昨日 </el-button>
            <el-button text bg @click="lastSevenDay()"> 近7日 </el-button>
            <el-button text bg @click="lastFifteenDay()"> 近15日 </el-button>
            <el-button text bg @click="lastThirtyDay()"> 近30日 </el-button>
        </div>

    <el-card>

    <el-row :gutter="30">
        <el-col :span="12">
    <el-card>
        <div class="Statistic" ref="amountRef">

        </div>
    </el-card>
        </el-col>

        <el-col :span="12">
    <el-card>
        <div class="Statistic" ref="dishRef">
        </div>
    </el-card>
        </el-col>

    </el-row>
        <el-row>
            <el-col :span="24" style="height: 20px">
            </el-col>
        </el-row>
        <el-row :gutter="30">

            <el-col :span="12">
                <el-card>
                    <div class="Statistic" ref="userRef">

                    </div>
                </el-card>
            </el-col>

            <el-col :span="12">
                <el-card>
                    <div class="Statistic" ref="orderRef">

                    </div>
                </el-card>
            </el-col>

        </el-row>
    </el-card>
</template>

<script setup>
    import axios from "axios";
    import { reactive,ref, onMounted,onBeforeMount } from 'vue'
    import * as echarts from 'echarts';
    const orderRef = ref()
    const dishRef=ref()
    const userRef=ref()
    const amountRef=ref()
    let beginTime=ref(new Date()-7 * 24 * 60 * 60 * 1000)
    let endTime=ref(new Date())
    let dishName=[]
    let dishNumber=[]
    let dateList=[]
    let newUsers=[]
    let totalUsers=[]
    let Success=[]
    let unSuccess=[]
    let total=[]
    let amountList=[]
    const getTable=()=>{
        let beginDate=new Date(beginTime.value).format("yyyy-MM-dd")
        let endDate=new Date(endTime.value).format("yyyy-MM-dd")
        axios.get("api/merchant/getDishTop",{
            params:{
                begin:beginDate,
                end:endDate
            }
        }).then(res=>{
            dishNumber=res.data.data.number;
            dishName=res.data.data.dishName;
            let myChart = echarts.init(dishRef.value);
            // 绘制图表
            myChart.setOption({
                title: {
                    text: '销量前十'
                },
                tooltip: {},
                xAxis: {
                    data: dishName
                },
                yAxis: {},
                series: [
                    {
                        name: '销量',
                        type: 'bar',
                        data: dishNumber
                    }
                ]
            });
        })

        axios.get("api/merchant/getUserNumber",{
            params:{
                begin:beginDate,
                end:endDate
            }
        }).then(res=>{
            console.log(res.data);
            dateList=res.data.data.dateList
            newUsers=res.data.data.newUsers
            totalUsers=res.data.data.users
            const myChart = echarts.init(userRef.value);
            // 绘制图表
            myChart.setOption({
                title: {
                    text: '顾客数量统计'
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['顾客总数', '新顾客']
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                toolbox: {
                    feature: {
                        saveAsImage: {}
                    }
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data:dateList
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        name: '顾客总数',
                        type: 'line',
                        data: totalUsers
                    },
                    {
                        name: '新顾客',
                        type: 'line',
                        data: newUsers
                    }
                ]
            });
        })

        axios.get("api/merchant/getOrderNumber",{
            params:{
                begin:beginDate,
                end:endDate
            }
        }).then(res=>{
            console.log(res.data);
            dateList=res.data.data.dateList
            Success=res.data.data.success
            unSuccess=res.data.data.unSuccess
            total=res.data.data.total
            const myChart = echarts.init(orderRef.value);
            // 绘制图表
            myChart.setOption({
                title: {
                    text: '订单数量变化'
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['订单总数', '成功订单','退款订单']
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                toolbox: {
                    feature: {
                        saveAsImage: {}
                    }
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data:dateList
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        name: '订单总数',
                        type: 'line',
                        data: total
                    },
                    {
                        name: '成功订单',
                        type: 'line',
                        data: Success
                    },
                    {
                        name: '退款订单',
                        type: 'line',
                        data: unSuccess
                    },
                ]
            });
        })

        axios.get("api/merchant/getTurnover",{
            params:{
                begin:beginDate,
                end:endDate
            }
        }).then(res=>{

            amountList=res.data.data.amountList;
            dateList=res.data.data.dateList;
            let myChart = echarts.init(amountRef.value);
            // 绘制图表
            myChart.setOption( {
                title:{
                  text:'每日营业额'
                },
                tooltip: {
                    trigger: 'axis'
                },
                xAxis: {
                    type: 'category',
                    data: dateList
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        data: amountList,
                        type: 'line',
                        smooth: true
                    }
                ]
            });
        })
    }
    getTable()
    const yesterday=()=>{
        beginTime=ref(new Date()-1 * 24 * 60 * 60 * 1000)
        endTime=ref(new Date())
        getTable()
    }
    const lastSevenDay=()=>{
        beginTime=ref(new Date()-7* 24 * 60 * 60 * 1000)
        endTime=ref(new Date())
        getTable()
    }
    const lastFifteenDay=()=>{
        beginTime=ref(new Date()-15* 24 * 60 * 60 * 1000)
        endTime=ref(new Date())
        getTable()
    }
    const lastThirtyDay=()=>{
        beginTime=ref(new Date()-30* 24 * 60 * 60 * 1000)
        endTime=ref(new Date())
        getTable()
    }
</script>

<style scoped>
.Statistic{
    width: 100%;
    height: 300px;
}
</style>